<template>
	<view>
		<view class="listbox">
			<view class="listview flex ac">
				<view class="listtext">收货人</view>
				<input class="searchbar-input" @input="namedata" :value="namevalue" type="text" placeholder-style="color:#888888;
					font-size:29rpx;" placeholder="非真实姓名可能无法发货" />
			</view>
			<view class="listview flex ac">
				<view class="listtext">手机号码</view>
				<input class="searchbar-input" @input="phonedata" :value="phonevalue" type="number" placeholder-style="color:#888888;
					font-size:29rpx;" placeholder="请输入收件人手机号码" />
			</view>
			<view class="listview flex ac">
				<view class="listtext">所在地区</view>
				<view class="flex ac">
					<pickerAddress @change="change" class="pada">{{timetext}}</pickerAddress>
					<image style="width: 50rpx;" mode="widthFix" src="../../static/icon/right1.png"></image>
				</view>
			</view>
			<view class="listviewa flex">
				<view class="listtext" style="margin-top: 30rpx;">详细地址</view>
				<textarea @input="describe" :value="addrvalue" class="neirong"
					placeholder-style="font-size:29rpx;folor:#888888;" placeholder="请填写详细地址"></textarea>
			</view>
		</view>

		<view class="listbox flex ac" style="margin-top: 20rpx;">
			<view style="flex: 1;">
				<view style="font-size: 30rpx;margin-top: 20rpx;margin-bottom: 10rpx;">设为默认地址</view>
				<view style="color: #797979;font-size: 26rpx;margin-bottom: 20rpx;">港澳台及海外地址请联系客服</view>
			</view>
			<view>
				<switch @change="chaate" :checked="isChec" v-model="isChec"></switch>
			</view>
		</view>

		<view class="buttombox">
			<view class="buttomview" @click="add">{{type=='1'?'提交':'修改地址'}}</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	import pickerAddress from '@/components/pickerAddress';
	export default {
		components: {
			pickerAddress
		},

		data() {
			return {
				namevalue: '', //收货人
				phonevalue: '', //手机号
				timetext: '请选择',
				province: '', //省
				city: '', //市
				county: '', //县级市
				addrvalue: '', //详细地址
				addrdata: 0, //默认地址 1是默认地址 0是不默认地址
				id: '',
				type: '1',
				isChec: false,
			}
		},

		onLoad(e) {
			this.type = e.type
			if (e.type == '2') {
				this.id = e.id
				this.defaultaddr()
			}
		},

		methods: {
			async defaultaddr(e) {
				let apply = await request(`${getApp().globalData.http}user/default_addr`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					addr_id: this.id,
				})
				if (apply.data.code == 0) {
					this.namevalue = apply.data.data.name //收货人
					this.phonevalue = apply.data.data.phone //手机号
					this.addrvalue = apply.data.data.addr //详细地址
					this.timetext = apply.data.data.province + apply.data.data.city + apply.data.data.county
					this.province = apply.data.data.province
					this.city = apply.data.data.city
					this.county = apply.data.data.county
					this.isChec = apply.data.data.default_addr
					if (apply.data.data.default_addr == true) {
						this.addrdata = 1
					} else {
						this.addrdata = 0
					}
				}
			},

			chaate(e) {
				this.isChec = e.detail.value
				if (this.isChec == true) {
					this.addrdata = 1
				} else {
					this.addrdata = 0
				}
			},

			//填写收货人
			namedata(e) {
				this.namevalue = e.detail.value
			},

			//填写手机号
			phonedata(e) {
				this.phonevalue = e.detail.value
			},

			//填写详细地址
			describe(e) {
				this.addrvalue = e.detail.value
			},

			async add(e) {
				if (this.namevalue == '') {
					uni.showToast({
						title: '请填写收货人',
						icon: "none",
					})
					return
				}

				if (this.phonevalue == '') {
					uni.showToast({
						title: '请填写手机号',
						icon: "none",
					})
					return
				}

				if (this.province == '') {
					uni.showToast({
						title: '请选择所在地区',
						icon: "none",
					})
					return
				}

				if (this.addrvalue == '') {
					uni.showToast({
						title: '请填写收货详细地址',
						icon: "none",
					})
					return
				}

				if (this.type == '1') {
					let apply = await request(`${getApp().globalData.http}user/add_addr`, {
						'X-Requested-With': 'XMLHttpRequest',
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
					}, "POST", {
						token: getApp().globalData.token,
						name: this.namevalue,
						phone: this.phonevalue,
						province: this.province,
						city: this.city,
						county: this.county,
						addr: this.addrvalue,
						label: '',
						default_addr: this.addrdata,
					})
					if (apply.data.code == 0) {
						uni.showToast({
							title: `${apply.data.message}`,
							duration: 2000,
							icon: "none",
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
						uni.setStorageSync("update_quedindel", 1)
					} else {
						uni.showToast({
							title: `${apply.data.message}`,
							icon: "none",
						})
					}
				} else {
					let apply = await request(`${getApp().globalData.http}user/update_addr`, {
						'X-Requested-With': 'XMLHttpRequest',
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
					}, "POST", {
						token: getApp().globalData.token,
						addr_id: this.id,
						name: this.namevalue,
						phone: this.phonevalue,
						province: this.province,
						city: this.city,
						county: this.county,
						addr: this.addrvalue,
						label: '',
						default_addr: this.addrdata,
					})
					if (apply.data.code == 0) {
						uni.showToast({
							title: `${apply.data.message}`,
							duration: 2000,
							icon: "none",
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
						uni.setStorageSync("update_quedindel", 1)
					} else {
						uni.showToast({
							title: `${apply.data.message}`,
							icon: "none",
						})
					}
				}

			},

			//选择地区
			change(data) {
				this.timetext = data.data.join('')
				this.province = data.data[0];
				this.city = data.data[1];
				this.county = data.data[2];
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8FAFC;
		padding: 20rpx;
	}

	.listbox {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.listview {
		height: 110rpx;
		border-bottom: 1rpx solid #EBEBEB;
	}

	.listviewa {
		height: 200rpx;
	}

	.neirong {
		width: 500rpx;
		height: 200rpx;
		text-align: right;
		padding-top: 30rpx;
	}

	.listtext {
		font-size: 30rpx;
		flex: 1;
	}

	.pada {
		font-size: 29rpx !important;
	}

	.searchbar-input {
		width: 500rpx;
		height: 100rpx;
		text-align: right;
		margin-right: 10rpx;
	}

	.buttombox {
		width: 100%;
		height: 200rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		// align-items: center;
		justify-content: center;
	}

	.buttomview {
		width: 600rpx;
		height: 90rpx;
		color: #ffffff;
		background-color: #353535;
		border-radius: 50rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 33rpx;
	}
</style>